Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Document
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } body{ background: black; } .face{ height: 300px; width: 300px; position: relative; border-radius: 50%; background: yellow; margin: 100px auto; } .eye1{ height: 80px; width: 80px; border-radius: 50%; position: absolute; left:40px; top: 70px; background: white; } .eyeball1{ height: 30px; width: 30px; border-radius: 50%; left: 65px; top:95px; position: absolute; background: black; } .eye2{ height: 80px; width: 80px; border-radius: 50%; position: absolute; left:180px; top: 70px; background: white; } .eyeball2{ height: 30px; width: 30px; border-radius: 50%; left: 204px; top:95px; position: absolute; background: black; } .eyeball1,.eyeball2{ animation: move 4s ease-in-out infinite; } @keyframes move{ 0%{ transform: translateY(-20px); } 50%{ transform:translateY(20px); } 100%{ transform: translateY(-20px); } } .mouth{ height: 10px; width: 60px; left: 120px; top:210px; border-radius: 10px; position: absolute; background: black; } .tongue{ height: 30px; width: 50px; left: 125px; top:220px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; position: absolute; background: red; animation: tongue 4s ease-in-out infinite ; } @keyframes tongue{ 0%{ height: 0px; } 50%{ height: 39px; } 100%{ height: 1px; } }
console.log("Event Fired")